<template>
  <div class="album_contaner padd100">

    <div class="hot_new_cd_warpper">
      <div class="tit">
        热门新碟
      </div>
      <el-row :gutter="20" v-loading="loading1" element-loading-text="正在玩命加载...">
        <el-col :lg="3" :sm="6" :md="6" :xs="12" v-for="item in topAlbumData" :key="item" style="margin-bottom:20px">
          <CdMusic :picUrl="item.picUrl + '?param=296y150'" @handleClickToArtistDetail="handleClickToArtistDetail"
            @handleClickToAlbumDetail="handleClickToAlbumDetail" :id="item.id" :name="item.name"
            :artists="item.artists" />
        </el-col>
      </el-row>
    </div>
    <div class="all_new_cd_wrapper">
      <div class="tit">
        <div>
          全部新碟
        </div>
        <el-radio-group v-model="radio1" @change="handleChangeRadio">
          <el-radio-button label="ALL">
            全部
          </el-radio-button>
          <el-radio-button label="ZH">
            华语
          </el-radio-button>
          <el-radio-button label="EA">
            欧美
          </el-radio-button>
          <el-radio-button label="KR">
            韩国
          </el-radio-button>
          <el-radio-button label="JP">
            日本
          </el-radio-button>

        </el-radio-group>
      </div>

      <el-row :gutter="20" v-loading="loading2" element-loading-text="正在玩命加载...">
        <el-col :lg="3" :sm="6" :md="6" :xs="12" v-for="item in allAlbumData" :key="item" style="margin-bottom:20px">
          <CdMusic :picUrl="item.picUrl + '?param=296y150'" @handleClickToArtistDetail="handleClickToArtistDetail"
            @handleClickToAlbumDetail="handleClickToAlbumDetail" :id="item.id" :name="item.name" :artists="item.artists" />
        </el-col>
      </el-row>
      <div class="pageination_center" style="margin-top:40px">
        <el-pagination v-show="total > 0" v-model:currentPage="pageNum" :page-size="28" :total="total"
          @current-change="handleCurrentChange" background layout="prev, pager, next" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy } from '@element-plus/icons-vue'
import CdMusic from "@/components/CdMusic/index";
import { getTopAlbum, getAlbum } from "@/api/album";
import router from '@/router';
const radio1 = ref<string>('ALL')
// 热门新碟
const topAlbumData = ref<any[]>([])
const total = ref<number>(0)
const limit = ref<number>(24)
const pageNum = ref<number>(1)
// 全部新碟
const allAlbumData = ref<any[]>([])
const loading1 = ref<boolean>(false)
const loading2 = ref<boolean>(false)
// 获取热门新碟 截取数组
const getTopAlbumData = async () => {
  try {
    loading1.value = true
    const res: any = await getTopAlbum({
      type: "hot",
      area: 'ALL'
    })
    console.log(res);
    topAlbumData.value = res.weekData.splice(0, 8)
  } finally {
    loading1.value = false
  }
}
// radio选中事件
const handleChangeRadio = (value: string) => {
  // 重置页数
  pageNum.value = 1
  getAllAlbumData()
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  getAllAlbumData()
}
// 获取全部新碟
const getAllAlbumData = async () => {
  try {
    loading2.value = true
    const res: any = await getAlbum({
      limit: limit.value,
      offset: (pageNum.value - 1) * limit.value,
      area: radio1.value
    })
    allAlbumData.value = res.albums
    total.value = res.total
  } finally {
    loading2.value = false
  }
}
// 去专辑详情页
const handleClickToAlbumDetail = (id:number) => {
  router.push({
    name: 'album-detail',
    params: {
      id
    }
  })
}
// 去歌手 / 艺人 详情页
const handleClickToArtistDetail = (id:number) => {
  router.push({
    name: 'artist-detail',
    params: {
      id
    }
  })
}
onMounted(() => {
  getTopAlbumData()
  getAllAlbumData()
})
</script>
<style lang="scss" scoped>
.album_contaner {
  margin-top: 20px;

  .hot_new_cd_warpper {
    margin-bottom: 50px;
  }

  .tit {
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 24px;
    padding: 10px 0;
    border-bottom: 2px solid #409eff;
    margin-bottom: 20px;
  }
}
</style>
